<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 这是一个div -->
  <div id="box" class="one two" title="1223123">
    hello world
  </div>

  <!-- 
        一阶段
        整个页面         文档
        div             标签/标记/元素
        id/class/title  属性
        hello world     文本
        这是一个div      注释

        属性和文本 依存于 元素
     -->

</body>
<script>
    // JS组成
    // 1. ECMAScript    2. BOM    3. DOM

    // DOM  (Document Object Model) 提供了操作文档的接口和方法

    // 已经接触过的
    // (1)  获取元素   js操作元素之前需要先获取元素  
    // (2)  绑定事件
    // (3)  取值和赋值  value innerHTML innerText
    // (4)  改变样式


    // HTML DOM - 针对 HTML 文档的标准模型
    // HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准，即操作HTML的元素
    //  => HTML元素的 增 删 改 查


    // DOM节点 (node)
    // 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
    // 整个文档         文档节点
    // html元素/标签    元素节点
    // id/class/title  属性节点
    // hello world     文本节点
    // 这是一个div      注释节点

    // 属性节点和文本节点 依存于 元素节点


    // 节点的层级关系
    // 子节点
    // 父节点
    // 同胞节点
    // 根节点

    // 根节点没有父节点




</script>

</html>